<template>
  <div class="content">
    <div v-for="message in messages">
      <message :text=message.text :time=message.time :self=message.self></message>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Message from './message'

  export default {
    name: 'chat-content',
    computed: {
      // 使用对象展开运算符将 getters 混入 computed 对象中
      ...mapGetters({
        messages: 'GET_MESSAGES'
      })
    },
    components: {Message},
    updated () {
      this.$el.scrollTop = this.$el.scrollHeight
    }
  }
</script>

<style scoped lang="less">
  .content {
    height: 280px;
    background-color: #fff;
    border: 1px solid #ddd;
    overflow-y: auto;
    padding-bottom: 50px;
  }

</style>
